<template>
  <div class="horizontal-container">
    <div>
      <!-- 左侧菜单栏 -->
      <EntityClassAndEntityInstance />
    </div>
    <!-- 中间内容区域 -->
    <div class="content-area">
      <div class="title">知识图谱</div>
      <div>
        <GraphCanvas :style="style" :graphData="graphData" :domain="domain" :domainId="domainId"
          :RingFunction="RingFunction" @editForm="editForm" />
      </div>
    </div>
    <div>
      <!-- 右侧文档信息区域 -->
      <DocumentInfo />
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
// eslint-disable-next-line no-unused-vars
import DocumentInfo from './DocumentInfo.vue'
import EntityClassAndEntityInstance from './EntityClassAndEntityInstance.vue'
import GraphCanvas from './GraphCanvas.vue'
export default defineComponent({
  components: {
    DocumentInfo,
    EntityClassAndEntityInstance,
    GraphCanvas
  },
  data() {
    return {
      style: null,
      graphData: {
        nodes: [],
        links: []
      },
      domain: '',
      domainId: 0,
      RingFunction: [
        // ... RingFunction 数据
      ]
    }
  },
  methods: {
    editForm(flag, action, data, domainId) {
      // 处理 editForm 事件
    }
  }
})
</script>

<style scoped>
.horizontal-container {
  display: flex;
}

.horizontal-container>div:nth-child(1),
.horizontal-container>div:nth-child(3) {
  flex: 1;
}

.horizontal-container>div:nth-child(2) {
  flex: 3;
}

/*中间内容区域*/
.content-area {
  width: 100%;
  height: 625px;
  border: 1px solid #ffffff;
  border-radius: 10px;
  background-color: #ffffff;
  margin-right: 10px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.title {
  text-align: left;
}

.tox-toolbar__primary {
  background-color: #c45656;
}
</style>
